import PermissionLink from '@/components/PermissionLink'
import { downloadByOwnUrl, getNameByOwnUrl, isImageFile } from '@/utils/util'
import { DownOutlined, EditOutlined } from '@ant-design/icons'
import { Dropdown, Image, Space, TableColumnsType, Tooltip, Typography } from 'antd'
import { IMenuItem } from '../FactoryOrder'
import { SupplierGreyFabricVO as ITableData } from './types'
export const useIndexColumns = ({
  isRoot,
  onEdit,
  GreyclothEditFabricUnitPrice,
  GreyclothEditOrderQty,
  GreyclothEditRemark,
  GreyclothEditQcReport,
  operateItems,
  handleMenuClick,
  onViewLogs,
}: {
  isRoot: boolean
  onEdit: (info: ITableData, type: 1 | 2 | 3 | 4) => void
  GreyclothEditFabricUnitPrice: boolean
  GreyclothEditOrderQty: boolean
  GreyclothEditRemark: boolean
  GreyclothEditQcReport: boolean
  operateItems: IMenuItem[]
  handleMenuClick: (rows: ITableData, key: any) => void
  onViewLogs: (rows: ITableData) => void
}): TableColumnsType<ITableData> => [
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    align: 'center',
    width: 280,
    fixed: 'left',
    render: (_, rows) => {
      return (
        <Space size="middle">
          {operateItems.length > 0 && (
            <Dropdown menu={{ items: operateItems, onClick: (key) => handleMenuClick(rows, key) }}>
              <a>
                更多操作
                <DownOutlined style={{ marginLeft: 2 }} />
              </a>
            </Dropdown>
          )}
          <PermissionLink
            permission="GreyclothReportFinished"
            onClick={() => handleMenuClick(rows, { key: 'GreyclothReportFinished' })}
          >
            汇报成品坯布
          </PermissionLink>
          <PermissionLink permission="GreyclothViewLogs" onClick={() => onViewLogs(rows)}>
            查看日志
          </PermissionLink>
        </Space>
      )
    },
  },
  {
    title: '面料供应商',
    dataIndex: 'supplierName',
    key: 'supplierName',
    align: 'center',
    fixed: 'left',
    width: 200,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? <Tooltip title={info}>{info || '-'}</Tooltip> : '-'
    },
  },
  {
    title: '开发季',
    dataIndex: 'seasonName',
    key: 'seasonName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '面料编码',
    dataIndex: 'fabricCode',
    key: 'fabricCode',
    align: 'center',
    width: 110,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '面料名称',
    dataIndex: 'fabricName',
    key: 'fabricName',
    align: 'center',
    width: 100,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? (
        <Tooltip title={info}>
          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{info || '-'}</div>
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: '面种编码',
    dataIndex: 'fabricTypeCode',
    key: 'fabricTypeCode',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '可用大类',
    dataIndex: 'usedClassNames',
    key: 'usedClassNames',
    align: 'center',
    width: 100,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? (
        <Tooltip title={info}>
          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{info || '-'}</div>
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: '面料单价',
    dataIndex: 'fabricUnitPrice',
    key: 'fabricUnitPrice',
    align: 'center',
    width: 100,
    hidden: !isRoot,
    render: (info, rows) => {
      return (
        <span>
          {info ? info + (rows?.fabricUnit ? '/' + rows?.fabricUnit : '') : '-'}
          {GreyclothEditFabricUnitPrice && (
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 4 }}
                onClick={() => onEdit(rows, 1)}
              />
            </Tooltip>
          )}
        </span>
      )
    },
  },
  {
    title: '坯布下单量',
    dataIndex: 'orderQty',
    key: 'orderQty',
    align: 'center',
    width: 100,
    render: (info, rows) => {
      return (
        <span>
          {info ? info + (rows?.fabricUnit || '') : '-'}
          {GreyclothEditOrderQty && (
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 4 }}
                onClick={() => onEdit(rows, 2)}
              />
            </Tooltip>
          )}
        </span>
      )
    },
  },
  {
    title: '成品数量-坯布',
    dataIndex: 'finishQty',
    key: 'finishQty',
    align: 'center',
    width: 110,
    render: (info, rows) => {
      return info ? info + (rows?.fabricUnit || '') : '-'
    },
  },
  {
    title: '已转色数量',
    dataIndex: 'changeColorFabricQty',
    key: 'changeColorFabricQty',
    align: 'center',
    width: 100,
    render: (info, rows) => {
      return info ? info + (rows?.fabricUnit || '') : '-'
    },
  },
  {
    title: '质检报告',
    dataIndex: 'qcReport',
    key: 'qcReport',
    align: 'center',
    width: 120,
    render: (info, rows) => {
      return (
        <span>
          {isImageFile(info) ? (
            <Image rootClassName="table_image" width={40} height={40} src={info} />
          ) : info ? (
            <Tooltip placement="top" title={info}>
              <Typography.Link
                ellipsis
                onClick={() => {
                  downloadByOwnUrl(info)
                }}
              >
                <div style={{ maxWidth: 40, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {getNameByOwnUrl(info)}
                </div>
              </Typography.Link>
            </Tooltip>
          ) : (
            '-'
          )}
          {GreyclothEditQcReport && (
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 4 }}
                onClick={() => onEdit(rows, 4)}
              />
            </Tooltip>
          )}
        </span>
      )
    },
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    align: 'center',
    width: 100,
    ellipsis: {
      showTitle: false,
    },
    render: (info, rows) => {
      return (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {info ? (
            <Tooltip title={info}>
              <div style={{ maxWidth: 100, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {info || '-'}
              </div>
            </Tooltip>
          ) : (
            '-'
          )}
          {GreyclothEditRemark && (
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 4 }}
                onClick={() => onEdit(rows, 3)}
              />
            </Tooltip>
          )}
        </div>
      )
    },
  },
]
